<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>安全组管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});

		function choose(selete)
		{
			var option=selete.options[selete.selectedIndex].value;
			if(option==0)
			{
				$("#port_num").show();
				$("#port_range").hide();

			}else{
				$("#port_num").hide();
				$("#port_range").show();
			}

		}
		function remoteChooseSelect(selete)
		{
			var option=selete.options[selete.selectedIndex].value;
			if(option==1)
			{
				$("#remoteGroup").show();
				$("#remoteCIDR").hide();

			}else{
				$("#remoteGroup").hide();
				$("#remoteCIDR").show();
			}

		}
	</script>
</head>
<body>
<ul class="nav nav-tabs">
	<li><a href="${ctx}/scene/sceneSecurityGroup/goSecurityGroupRule?id=${sceneSecurityGroup.id}">安全组规则列表</a></li>
	<li class="active"><a href="${ctx}/scene/sceneSecurityGroup/addRule?sceneSecurityGroupId=${sceneSecurityGroupId}">安全组添加</a></li>
</ul><br/>
<form id="inputForm" modelAttribute="sceneSecurityGroupRule" action="${ctx}/scene/sceneSecurityGroup/saveRule" method="post" class="form-horizontal">
	<%--<form:hidden path="id"/>--%>
	<sys:message content="${message}"/>
	<input type="hidden" id="securityGroupId" name="securityGroupId" value="${sceneSecurityGroupId}">
	<div class="control-group">
		<label class="control-label">方向：</label>
		<div class="controls">
			<select id="direction" name="direction" class="input-xlarge">
				<option value="ingress">入口</option>
				<option value="egress">出口</option>
			</select>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label">以太网类型：</label>
		<div class="controls">
			<select id="ethertype" name="ethertype" class="input-xlarge">
				<option value="IPv4">IPv4</option>
				<option value="IPv6">IPv6</option>
			</select>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label">IP协议：</label>
		<div class="controls">
			<select id="protocol" name="protocol" class="input-xlarge">
				<option value="tcp">定制TCP规则</option>
				<option value="udp">定制UDP规则</option>
				<%--<option value="icmp">定制ICMP规则</option>--%>
			</select>
		</div>
	</div>
	<%--<div class="control-group">--%>
		<%--<label class="control-label">远程安全组：</label>--%>
		<%--<div class="controls">--%>
			<%--<select id="remoteGroupid" name="remoteGroupid" class="input-xlarge">--%>
				<%--&lt;%&ndash;<option value="" selected>===请选择===</option>&ndash;%&gt;--%>
				<%--<c:forEach var="securityGroup" items="${securityGroupList}">--%>
				<%--<option value="${securityGroup.id}">${securityGroup.name}<c:if test="${sceneSecurityGroupId==securityGroup.id}">(当前)</c:if></option>--%>
				<%--</c:forEach>--%>
				<%--&lt;%&ndash;<option value="default">default</option>&ndash;%&gt;--%>
			<%--</select>--%>
		<%--</div>--%>
	<%--</div>--%>
	<div class="control-group">
		<label class="control-label">打开端口:</label>

		<div class="controls">
			<select class="input-xlarge" onchange="choose(this)" name="portChoose" id="portChoose">
				<option value="0">端口</option>
				<option value="1">端口范围</option>
			</select>
		</div>
	</div>
	<div id="port_num">
		<div class="control-group">
			<label class="control-label">端口：</label>
			<div class="controls">
				<input type="text" name="port"  id="port" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				<label>输入大于1小于65535的整数</label>
			</div>
		</div>
	</div>
	<div id="port_range" hidden>
		<div class="control-group">
			<label class="control-label">起始端口号：</label>
			<div class="controls">
				<input type="text" name="fromPort"  id="fromPort" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				<label>输入大于1小于65535的整数</label>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">终止端口号：</label>
			<div class="controls">
				<input type="text" name="toPort" id="toPort" htmlEscape="false" maxlength="64" class="input-xlarge "/>
				<label>输入大于1小于65535的整数</label>

			</div>
		</div>
	</div>
		<div class="control-group">
			<label class="control-label">远程:</label>

			<div class="controls">
				<select onchange="remoteChooseSelect(this)" class="input-xlarge" name="remoteChoose" id="remoteChoose">
					<option value="0" selected>CIDR</option>
					<option value="1">安全组</option>
				</select>
			</div>
		</div>
		<div class="control-group" id="remoteGroup" hidden>
			<label class="control-label">安全组:</label>
			<div class="controls">
				<select id="remoteGroupid" name="remoteGroupid" class="input-xlarge">
					<%--<option value="" selected>===请选择===</option>--%>
					<c:forEach var="securityGroup" items="${securityGroupList}">
						<option value="${securityGroup.id}">${securityGroup.name}<c:if test="${sceneSecurityGroupId==securityGroup.id}">(当前)</c:if></option>
					</c:forEach>
					<%--<option value="default">default</option>--%>
				</select>
			</div>
		</div>
		<div class="control-group" id="remoteCIDR">
			<label class="control-label">CIDR:</label>
			<div class="controls">
				<input type="text" name="remoteIpprefix" id="remoteIpprefix" htmlEscape="false" maxlength="64" class="input-xlarge " value="0.0.0.0/0"/>
			</div>
		</div>
	<div class="form-actions">
		<shiro:hasPermission name="scene:sceneSecurityGroup:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
		<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
	</div>
</form>
</body>
</html>